import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import Loading from '@kuiper-components/loading';
import fetch from 'API/fetch';
import s from './style.module.css';
import HolesTotal from './HolesTotal';
import Security from '../../AssetManage/Detail/SecurityRating';
import AbnormalTasks from './AbnormalTasks';
import { datetime } from '../../../../common/formatter';

function Overview({ className, jobId, assetId }) {
	const resD = JSON.parse(sessionStorage.resD).feature;
	const [pdata, setData] = React.useState({});
	const [fullData, setFullData] = React.useState({});
	const [endTime, setEndTime] = React.useState('');

	const getdata = () => {
		if (jobId) {
			fetch(`/api/v2/repodatas/jobone?jobId=${jobId}`, {
				method: 'GET',
			}).then(res => {
				initData(res.data);
				setFullData(res.data);
			});
		}
	};
	const getEndTime = () => {
		if (jobId) {
			fetch(`/api/v2/repodatas/updated-time?jobId=${jobId}`, {
				method: 'GET',
			}).then(res => {
				setEndTime(res?.data?.endTime || '');
			});
		}
	};
	const initData = data => {
		const { vulResult = [], sslResult = [], httpResult = [], pingResult = [] } =
			data?.jobOne || {};
		let httpWarnTotal = httpResult?.reduce(
			(total, x) => total + x.result.warningCount,
			0
		);
		let pingWarnTotal = pingResult?.reduce(
			(total, x) => total + x.result.warningCount,
			0
		);
		let vulWarningCount = vulResult?.result?.warningCount || 0;
		let sslWarningCount = sslResult?.result?.warningCount || 0;
		if (!resD.sslManualTask && !resD.sslTask) {
			sslWarningCount = 0;
		}
		if (!resD.vulManualTask && !resD.vulTask) {
			vulWarningCount = 0;
		}
		if (!resD.httpTask) {
			httpWarnTotal = 0;
		}
		if (!resD.pingTask) {
			pingWarnTotal = 0;
		}
		setData({
			httpWarnTotal,
			pingWarnTotal,
			vulWarningCount,
			sslWarningCount,
		});
	};
	React.useMemo(() => {
		getdata();
		getEndTime();
	}, [jobId]);
	return (
		<Loading show={!!fullData?.loading} type="rollingLine">
			<div className={cn(className, s.overviewContainer)}>
				<div className={s.date}>更新时间：{datetime(endTime)}</div>
				<div className={cn(s.overview)}>
					<Security className={s.left} score={fullData?.jobOne?.score_info?.level === '未知' ? '' : fullData?.jobOne?.score_info?.score} />
					<div className={s.right}>
						<HolesTotal
							className={s.total}
							vulWarningCount={pdata.vulWarningCount || 0}
							sslWarningCount={pdata.sslWarningCount || 0}
						/>
						<AbnormalTasks
							className={s.event}
							httpWarningCount={pdata.httpWarnTotal || 0}
							pingWarningCount={pdata.pingWarnTotal || 0}
						/>
					</div>
				</div>
			</div>
		</Loading>
	);
}

Overview.propTypes = {
	className: PropTypes.string,
	data: PropTypes.shape({
		loading: PropTypes.bool,
		JobOne: PropTypes.shape({
			vulResult: PropTypes.object,
			sslResult: PropTypes.object,
			httpResult: PropTypes.object,
			pingResult: PropTypes.object,
		}),
		TaskOne: PropTypes.shape({
			endTime: PropTypes.object,
		}),
	}),
};
Overview.defaultProps = {
	className: '',
};

export default Overview;
